<template>
    <div class="sc-icon-select">
        <div :class="{'hasValue':value}" class="sc-icon-select__wrapper" @click="open">
            <el-input v-model="value" :disabled="disabled"  readonly @change="onChange()">
                <template #prefix>
                    <el-icon>
                        <svg-icon :icon="value ||'icon-plus'"/>
                    </el-icon>
                </template>
            </el-input>
        </div>
        <el-dialog v-model="dialogVisible" :width="760" append-to-body destroy-on-close title="图标选择器">
            <div class="sc-icon-select__dialog">
                <el-form @submit.prevent="onSearch(searchText)">
                    <el-form-item prop="searchText">
                        <el-input v-model="searchText" class="sc-icon-select__search-input" clearable placeholder="搜索" prefix-icon="el-icon-search" size="large"/>
                    </el-form-item>
                </el-form>
                <el-tabs>
                    <el-tab-pane lazy>
                        <template #label>
                            {{ data1.name }}
                            <el-tag size="small" type="info">{{ data1.icons.length }}</el-tag>
                        </template>
                        <div class="sc-icon-select__list">
                            <el-scrollbar>
                                <ul @click="onSelectIcon">
                                    <el-empty v-if="data1.icons.length===0" :image-size="100" description="未查询到相关图标"/>
                                    <li v-for="icon in data1.icons" :key="icon">
                                        <span :data-icon="icon"></span>
                                        <el-icon>
                                            <svg-icon :icon="icon"/>
                                        </el-icon>
                                    </li>
                                </ul>
                            </el-scrollbar>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane lazy>
                        <template #label>
                            {{ data2.name }}
                            <el-tag size="small" type="info">{{ data2.icons.length }}</el-tag>
                        </template>
                        <div class="sc-icon-select__list">
                            <el-scrollbar>
                                <ul @click="onSelectIcon">
                                    <el-empty v-if="data2.icons.length===0" :image-size="100" description="未查询到相关图标"/>
                                    <li v-for="icon in data2.icons" :key="icon">
                                        <span :data-icon="icon"></span>
                                        <el-icon>
                                            <svg-icon :icon="icon"/>
                                        </el-icon>
                                    </li>
                                </ul>
                            </el-scrollbar>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <template #footer>
                <el-button text @click="onClear">清除</el-button>
                <el-button @click="dialogVisible=false">取消</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import {icons} from "@/utils";
import SvgIcon from "@/components/svg-icon/index.vue";
import {ref, watch} from "vue";

const props = defineProps({
    disabled: {type: Boolean, default: false},
})

const value = defineModel({default: "el-icon-plus"});

const emits = defineEmits(['change'])

const dialogVisible = ref(false);
const data1 = ref({...icons[0]});
const data2 = ref({...icons[1]});
const searchText = ref('');

function open() {
    if (props.disabled) {
        return false
    }
    dialogVisible.value = true
}

function onSelectIcon(e: any) {
    if (e.target.tagName !== 'SPAN') {
        return false
    }
    value.value = e.target.dataset.icon
    dialogVisible.value = false;
    if (value.value !== e.target.dataset.icon) {
        emits('change')
    }
}

function onClear() {
    value.value = ''
    dialogVisible.value = false
}

function onSearch(text: string) {
    if (text) {
        data1.value.icons = icons[0].icons.filter((n: any) => n.indexOf(text) !== -1);
        data2.value.icons = icons[1].icons.filter((n: any) => n.indexOf(text) !== -1);
    } else {
        data1.value = {...icons[0]};
        data2.value = {...icons[1]};
    }
}

function onChange() {
    emits('change')
}

watch(() => searchText.value, (v) => onSearch(v));

defineExpose({open})
</script>

<style scoped>
.sc-icon-select {
    display: inline-flex;
}

.sc-icon-select__wrapper {
    cursor: pointer;
    display: inline-flex;
}

.sc-icon-select__wrapper:deep(.el-input__wrapper).is-focus {
    box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;
}

.sc-icon-select__wrapper:deep(.el-input__inner) {
    flex-grow: 0;
    width: 0;
}

.sc-icon-select__wrapper:deep(.el-input__icon) {
    margin: 0;
    font-size: 16px;
}

.sc-icon-select__wrapper.hasValue:deep(.el-input__icon) {
    color: var(--el-text-color-regular);
}

.sc-icon-select__wrapper:deep(.el-input__prefix-inner i) {
    margin-right: 0;
}

.sc-icon-select__list {
    height: 270px;
    overflow: auto;
}

.sc-icon-select__list ul {
}

.sc-icon-select__list li {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 5px;
    vertical-align: top;
    transition: all 0.1s;
    border-radius: 4px;
    position: relative;
}

.sc-icon-select__list li span {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    cursor: pointer;
}

.sc-icon-select__list li i {
    display: inline-block;
    width: 100%;
    height: 100%;
    font-size: 26px;
    color: #6d7882;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

.sc-icon-select__list li:hover {
    box-shadow: 0 0 1px 4px var(--el-color-primary);
    background: var(--el-color-primary-light-9);
}

.sc-icon-select__list li:hover i {
    color: var(--el-color-primary);
}
</style>
